import React, { Component } from 'react';
import { withRouter,NavLink} from 'react-router-dom';
import Unit from '../../unit/index.js';

class View extends Component{
    constructor(props){
        super(props);
        this.state = {
            tabCur:1,
            tabCur2:1,
            tabCur3:1,
            tabCur4:1,
            listData:[]
        }
    }
    // 第一种方法
    tabFn(e,index){
        this.setState({
            tabCur:index,
        })
    }
    // 第二种文案
    tabFn2(e,index){
        this.setState({
            tabCur2:index,
        })
    }
    tabBtn(index){
        const { tabCur2 } = this.state;
        return tabCur2 === index ? 'cur' : '';
    }
    tabBox(index){
        const { tabCur2 } = this.state;
        return tabCur2 === index ? 'cur' : '';
    }
    getNewsPage(page=1){
        const cfg = {
            page_number:page,
            page_size:20,
        }
        Unit.getApi2('home/mediareports',cfg,{}).then((res)=>{
            console.log(res.data)
            this.setState({
                listData:res.data.data
            })
        })
    }
    componentDidMount(){
        this.getNewsPage();
    }
    // 第三 种文案
    tabFn3(e,index){
        this.setState({
            tabCur3:index,
        })
    }
    // 第四 种文案
    tabFn4(e,index){
        this.setState({
            tabCur4:index,
        })
        this.getNewsPage(index)
    }
    newList(){
        const { listData } = this.state;
        const lists = listData.map((val,index)=>{
            return(
                <li key={val.id}>
                    <b>{val.id}</b>
                    <a href={val.jump_url} title={val.main_title}>{val.main_title}</a>
                    <span>{val.source}</span>
                    <span>{val.updatedAt}</span>
                </li>
            )
        })
        return lists;
    }
    tabSwitch(index,cls=''){
        const { tabCur3 } = this.state;
        return tabCur3 === index ? `cur ${cls}` : cls;
    }
    render(){
        const { tabCur,listData,tabCur4 } = this.state;
        return(
            <React.Fragment>
            <NavLink exact to="/">首页</NavLink><br/>
            <NavLink to="/tabbak">tabbak</NavLink><br/>
            <NavLink to="/newspage">newspage</NavLink><br/>
            <NavLink to="/tab">tab</NavLink><br/>
            <NavLink to="/page">page</NavLink><br/>
                <div className="m500">
                    <ul className="tab_btn clearfix">
                        <li onClick={(e)=>{this.tabFn(e,1)}} className={tabCur===1?'cur':''}>菜单一</li>
                        <li onClick={(e)=>{this.tabFn(e,2)}} className={tabCur===2?'cur':''}>菜单二</li>
                        <li onClick={(e)=>{this.tabFn(e,3)}} className={tabCur===3?'cur':''}>菜单三</li>
                    </ul>
                    <div className="tab_box">
                        <div className={tabCur===1?'current tab_box_list':'tab_box_list'}>第一块内容</div>
                        <div className={tabCur===2?'current tab_box_list':'tab_box_list'}>第二块内容</div>
                        <div className={tabCur===3?'current tab_box_list':'tab_box_list'}>第三块内容</div>
                    </div>
                </div>
                <div className="m500 tab_con">
                    <ul>
                        <li onClick={(e)=>{this.tabFn2(e,1)}} className={this.tabBtn(1)}>菜单一</li>
                        <li onClick={(e)=>{this.tabFn2(e,2)}} className={this.tabBtn(2)}>菜单二</li>
                        <li onClick={(e)=>{this.tabFn2(e,3)}} className={this.tabBtn(3)}>菜单三</li>
                    </ul>
                    <ol>
                        <li className={this.tabBox(1)}>第一块内容</li>
                        <li className={this.tabBox(2)}>第二块内容</li>
                        <li className={this.tabBox(3)}>第三块内容</li>
                    </ol>
                </div>
                <div className="m500 tab_con">
                    <ul>
                        <li onClick={(e)=>{this.tabFn3(e,1)}} className={this.tabSwitch(1)}>菜单一</li>
                        <li onClick={(e)=>{this.tabFn3(e,2)}} className={this.tabSwitch(2)}>菜单二</li>
                        <li onClick={(e)=>{this.tabFn3(e,3)}} className={this.tabSwitch(3)}>菜单三</li>
                    </ul>
                    <ol>
                        <li className={this.tabSwitch(1,'li')}>第一块内容</li>
                        <li className={this.tabSwitch(2,'li')}>第二块内容</li>
                        <li className={this.tabSwitch(3,'li')}>第三块内容</li>
                    </ol>
                </div>
                <div className="tab_con2">
                    <ul>
                        <li onClick={(e)=>{this.tabFn4(e,1)}} className={tabCur4===1?'cur':''}>IT资讯</li>
                        <li onClick={(e)=>{this.tabFn4(e,2)}} className={tabCur4===2?'cur':''}>金融资讯</li>
                        <li onClick={(e)=>{this.tabFn4(e,3)}} className={tabCur4===3?'cur':''}>娱乐影音</li>
                    </ul>
                    <div className="tab_news">
                        <ol>
                            {listData.length!==0?this.newList():''}
                        </ol>
                    </div>
                </div>
            </React.Fragment>
        )
    }
}
export default View;
